<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <head>
        <th:block th:include="include :: header('职位列表')"/>
    </head>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="searchForm">
                <div class="select-list">
                    <ul>
                        <li>
                            日志类型：
                            <select id="logType">
                                <option value="0">全部</option>
                                <option value="1">信息</option>
                                <option value="2">调试</option>
                                <option value="3">警告</option>
                                <option value="4">异常</option>
                            </select>
                        </li>
                        <li>
                            日志简述：<input type="text" id="logTitle" name="logTitle">
                        </li>
                        <li>
                            日期：<input type="text" id="logDate" name="logDate" th:value="${nowTime}"
                                      onclick="WdatePicker({isShowClear:false,dateFmt:'yyyy-MM-dd'})"
                                      readonly="readonly">
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" id="searchButton"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" id="resetButton"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="btn-group-sm" role="group" id="toolbar">
            <a class="btn btn-danger multiple disabled" onclick="removeAll(this);" data-id="0" data-role="admin:syslog:delete">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-danger" onclick="clearAll(this);" data-id="0" data-role="admin:syslog:clear">
                <i class="fa fa-trash"></i> 清空日志
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="dataTable"></table>
        </div>

    </div>
</div>
<div id="logDiv" class="ibox" style="display:none;">

    <div class="ibox-content">
        <div class="well">
            <h4 id="logTime"></h4>
            <div class="original" id="log">

            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<!-- jquery-validate 表单树插件 -->
<script type="text/javascript" th:inline="javascript">
    let $table;
    $(function () {
        loadData();

    });


    function loadData() {
        let options = {
            url: '/admin/syslog/getPageList',
            pageNumber: 1,                      // 初始化加载第一页，默认第一页,并记录
            pageSize: 10,                       // 每页的记录行数（*）
            pageList: "10, 25, 50, 100",        // 可供选择的每页的行数（*）
            queryParams: function (params) {
                let p = {
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
                    logType: $('logType').val(),
                    logDate: $('#logDate').val(),
                    logTitle: $('#logTitle').val()
                }
                return p;
            },
            columns: [
                {field: 'ck', checkbox: true},
                {
                    field: 'logTitle', title: '日志简述', align: 'left'
                },
                {
                    field: 'logType', title: '日志类型', align: 'center', width: 100, formatter: renderResult
                },
                {
                    field: 'logTime', title: '日志时间', align: 'center'
                },
                {
                    field: 'id', title: '操作', align: 'center', formatter: renderOpts
                }
            ]

        };
        $table = $('#dataTable').easyTable(options);

    }

    function renderResult(v, d) {
        var logTitle = 'info';
        var logClass = 'badge-info';
        switch (v) {
            case 2:
                logTitle = 'debug';
                logClass = 'badge-success';
                break;
            case 3:
                logTitle = 'warn';
                logClass = 'badge-warning';
                break;
            case 4:
                logTitle = 'error';
                logClass = 'badge-danger';
                break;

        }
        var html = '<span class="badge ' + logClass + '">' + logTitle + '</span>';

        return html;
    }

    function renderOpts(v) {
        var html = '<a data-role="0" class="btn btn-white btn-bitbucket" title="View" href="javascript:void(0);" onclick="detail(this)" data-id="' + v + '"><i class="fa fa-eye"></i></a>';
        return html;
    }


    function detail(obj) {
        $('#log').text('');
        let rowId = $(obj).data('id');
        let row = $table.easyTable('getRowById', rowId);
        if (row) {
            $('#log').text(row.logMessage);
            layer.open({
                title: '日志详情信息',
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['800px', '600px'], //宽高
                content: $('#logDiv')
            });
        }


    }

    function removeAll(obj) {
        const rows = $table.easyTable("selected");
        if (rows.length == 0) {
            jutils.warn("请选择数据行");
            return;
        }
        let ids=[];
        for (let i = 0; i < rows.length; i++) {
            ids.push(rows[i].id);
        }
        jutils.confirm("确认删除日志数据吗？", function () {
            jutils.ajaxGet("/admin/syslog/removeAll", {ids: ids.join()}, function (res) {
                if (res.status) {
                    $table.easyTable('search');
                }
            });
        });
    }

    function clearAll(obj) {

        jutils.confirm("确认清空日志数据吗？", function () {
            jutils.ajaxGet("/admin/syslog/clearAll", null, function (res) {
                if (res.status) {
                    $table.easyTable('search');
                }
            });
        });
    }

</script>
</body>
</html>